<template>
  <view class="store-detail-page">
    <!-- 顶部导航栏 -->
  <!-- <view class="nav-bar">
    <image class="back-icon" :src="'/static/images/icon_back@3x.png'" mode="aspectFit" @click="navigateBack" />
    <text class="nav-title">门店详情</text>
    <view class="nav-right"></view>
  </view> -->

  <!-- 门店图片轮播 -->
  <!-- <swiper class="store-swiper" autoplay circular :indicator-dots="true" indicator-active-color="#FFFFFF">
    <swiper-item>
      <image class="store-image" :src="'/static/images/redbag.png'" mode="aspectFill" />
    </swiper-item>
  </swiper> -->
  <view style="position:relative">
    <image class="store-image" :src="'/pagesTwo/static/images/maintain-orange.png'" mode="aspectFit" @click="navigateBack" />
    <!-- 门店基本信息 -->
    <view class="store-info">
      <view class="store-name-row">
        <text class="store-name">{{storeInfo.name}}</text>
        <view class="license-btn" @click="viewLicense">
          <text class="license-text">营业执照</text>
          <!-- <image class="right-icon" :src="'/static/images/Arrow right@2x.png'" mode="aspectFit" /> -->
          <uni-icons type="right" size="12" />
        </view>
      </view>
      <text class="store-address">{{storeInfo.distance}} {{storeInfo.address}}</text>
      <text class="store-time">营业时间：{{storeInfo.businessHours}}</text>
      <view class="store-tags">
        <text class="tag" v-for="(tag, index) in storeInfo.tags" :key="index">{{tag}}</text>
      </view>
    </view>
  </view>

    <!-- 促销活动选项卡 -->
    <view class="promotion-head">
      <view class="promotion-top">
        <text class="promotion-head-left">促销活动</text>
        <view class="promotion-head-right">
          <image class="guarantee" :src="'/pagesTwo/static/images/guarantee.png'" mode="aspectFill" />
          <text>随时退</text>
          <image class="guarantee" :src="'/pagesTwo/static/images/guarantee.png'" mode="aspectFill" />
          <text>过期自动退</text>
        </view>
      </view>

      <view class="promotion-tab">
        <view class="tab-item" :class="{active: activeTab === '全部'}" @click="switchTab('全部')">全部</view>
        <view class="tab-item" :class="{active: activeTab === '电车大保养'}" @click="switchTab('电车大保养')">电车大保养</view>
        <view class="tab-item" :class="{active: activeTab === '机油小保养'}" @click="switchTab('机油小保养')">机油小保养</view>
        <view class="tab-item" :class="{active: activeTab === '刹车油'}" @click="switchTab('刹车油')">刹车油</view>
      </view>

          <!-- 促销商品列表 -->
      <view class="product-list">
        <view class="product-item" v-for="(product, index) in products" :key="index">
          <view class="product-left">
            <image class="product-image" :src="product.image" mode="aspectFit" />
            <text class="hot-tag" v-if="product.isHot">明星产品</text>
          </view>
          <view class="product-center">
            <text class="product-title">{{product.title}}</text>
            <!-- <text class="product-desc">{{product.description}}</text> -->
            <view class="price-row">
              <text class="current-price">¥{{product.price}}</text>
              <text class="original-price">¥{{product.originalPrice}}</text>
            </view>
          </view>
          <view class="product-right">
            <view class="buy-btn" @click="buyProduct(product)">
              <text class="buy-text">购买</text>
            </view>
            <text class="sold-count">已售{{product.soldCount}}+</text>
          </view>
        </view>
      </view>

      <!-- 查看更多按钮 -->
      <view class="view-more" @click="viewMoreProducts">
        <text>查看更多{{products.length+1}}个套餐</text>
        <image class="down-icon" :src="'/static/images/under-arrow.png'" mode="aspectFit" />
      </view>
    </view>

    <!-- 底部操作栏 -->
    <view class="bottom-bar">
      <view class="navigate-btn" @click="navigateToStore">
        <text>导航到门店</text>
      </view>
      <view class="call-btn" @click="callStore">
        <text>电话咨询</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      activeTab: '全部',
      storeInfo: {
        name: '欧洲维修连锁（宝山蓓真犬店）',
        distance: '距您10.5km',
        address: '真大路454号',
        businessHours: '09:00-18:00',
        tags: ['网约车专修', '工位充足', '原厂直供']
      },
      products: [
        {
          id: 1,
          title: '新能源大保养套餐',
          description: '变速箱油1L 制动液1L 防冻液4L 工时',
          price: '280.00',
          originalPrice: '370.00',
          soldCount: '600',
          isHot: true,
          image: '/static/images/redbag.png'
        },
        {
          id: 2,
          title: '新能源大保养套餐',
          description: '变速箱油1L 制动液1L 防冻液4L 工时',
          price: '280.00',
          originalPrice: '370.00',
          soldCount: '300',
          isHot: true,
          image: '/static/images/redbag.png'
        },
        {
          id: 3,
          title: '新能源大保养套餐',
          description: '变速箱油1L 制动液1L 防冻液4L 工时',
          price: '280.00',
          originalPrice: '370.00',
          soldCount: '600',
          isHot: false,
          image: '/static/images/redbag.png'
        },
        {
          id: 4,
          title: '新能源大保养套餐',
          description: '变速箱油1L 制动液1L 防冻液4L 工时',
          price: '280.00',
          originalPrice: '370.00',
          soldCount: '600',
          isHot: false,
          image: '/static/images/redbag.png'
        },
        {
          id: 5,
          title: '新能源大保养套餐',
          description: '变速箱油1L 制动液1L 防冻液4L 工时',
          price: '280.00',
          originalPrice: '370.00',
          soldCount: '600',
          isHot: false,
          image: '/static/images/redbag.png'
        },
        {
          id: 6,
          title: '新能源大保养套餐',
          description: '变速箱油1L 制动液1L 防冻液4L 工时',
          price: '280.00',
          originalPrice: '370.00',
          soldCount: '600',
          isHot: false,
          image: '/static/images/redbag.png'
        }
      ]
    };
  },
  methods: {
    navigateBack() {
      uni.navigateBack();
    },
    viewLicense() {
      // 查看营业执照逻辑
      console.log('查看营业执照');
    },
    switchTab(tab) {
      this.activeTab = tab;
      // 切换选项卡逻辑，可以根据选项卡过滤商品列表
    },
    buyProduct(product) {
      // 购买商品逻辑
      console.log('购买商品', product);
    },
    viewMoreProducts() {
      // 查看更多商品逻辑
      console.log('查看更多商品');
    },
    navigateToStore() {
      // 导航到门店逻辑
      console.log('导航到门店');
    },
    callStore() {
      // 电话咨询逻辑
      console.log('电话咨询');
    }
  }
};
</script>

<style scoped>
view {
  box-sizing: border-box;
}
.store-detail-page {
  background: #F2F3F9;
  min-height: 100vh;
  position: relative;
  padding-bottom: 144rpx; /* 为底部操作栏留出空间 */
}

/* 顶部导航栏 */
/* .nav-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 88rpx;
  padding: 0 30rpx;
  background: #FFFFFF;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
} */
.promotion-head {
  padding: 28rpx 30rpx 16rpx 30rpx;
  background: #FFFFFF;
}
.promotion-top{
  display: flex;
  justify-content: space-between;
  margin-bottom: 42rpx;
  /* padding: 28rpx 30rpx; */
}
.promotion-head-left {
  font-weight: 600;
  font-size: 32rpx;
  color: #333333;
}
.promotion-head-right {
  font-size: 24rpx;
  color: #AAAAAA;
  line-height: 32rpx;
  display: flex;
  align-items: center;
}
.promotion-head-right image {
  width: 28rpx;
  height: 28rpx;
}
.back-icon {
  width: 44rpx;
  height: 44rpx;
}
.guarantee {
  width: 28rpx;
  height: 28rpx;
}
.nav-title {
  font-size: 32rpx;
  font-weight: 600;
  color: #333333;
}

.nav-right {
  width: 44rpx;
}

/* 门店图片轮播 */
.store-swiper {
  width: 100%;
  height: 360rpx;
}

.store-image {
  width: 100%;
  height: 526rpx;
  margin-bottom: 220rpx;
}

/* 门店基本信息 */
.store-info {
  /* background: #FFFFFF; */
  padding: 30rpx;
  margin-bottom: 20rpx;
  width: 710rpx;
  height: 274rpx;
  background: #FFFFFF;
  box-shadow: 0rpx 6rpx 43rpx 0rpx rgba(0,0,0,0.06);
  border-radius: 32rpx 32rpx 32rpx 32rpx;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
}

.store-name-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 28rpx;
}

.store-name {
  font-size: 32rpx;
  font-weight: 600;
  color: #333333;
  flex: 1;
}

.license-btn {
  display: flex;
  align-items: center;
  /* background: #FFF3E8; */
  padding: 6rpx 16rpx;
  border-radius: 16rpx;
  margin-left: 20rpx;
  line-height: 24rpx;
}

.license-text {
  font-size: 22rpx;
  color: #000000;
  margin-right: 8rpx;
}

.right-icon {
  width: 16rpx;
  height: 16rpx;
}

.store-address {
  display: block;
  font-size: 26rpx;
  color: #000000;
  margin-bottom: 12rpx;
}

.store-time {
  display: block;
  font-size: 26rpx;
  color: #000000;
  margin-bottom: 16rpx;
}

.store-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 12rpx;
  
}

.tag {
  /* font-size: 22rpx;
  color: #999999;
  padding: 4rpx 12rpx;
  background: #F5F5F5;
  border-radius: 12rpx;

  width: 104rpx;
  height: 32rpx; */
  border-radius: 4rpx 4rpx 4rpx 4rpx;
  border: 1rpx solid #FF7836;
  /* width: 88rpx;
  height: 30rpx; */
  font-family: PingFang SC, PingFang SC;
  font-weight: 400;
  font-size: 22rpx;
  color: #FF7836;
  padding: 0 8rpx;
  /* text-align: left;
  font-style: normal;
  text-transform: none; */
}

/* 促销活动选项卡 */
.promotion-tab {
  display: flex;
  /* background: #FFFFFF; */
  /* padding: 24rpx 30rpx; */
  margin-bottom: 20rpx;
  /* overflow-x: auto;
  white-space: nowrap; */
}

.promotion-tab::-webkit-scrollbar {
  display: none;
}

.tab-item {
  font-size: 28rpx;
  /* font-weight: 600; */
  color: #000000;
  padding: 0 20rpx;
  height: 60rpx;
  line-height: 60rpx;
  /* border-radius: 30rpx; */
  border-radius: 8rpx 8rpx 8rpx 8rpx;
  margin-right: 20rpx;
  background: #F5F5F5;
}

.tab-item.active {
  color: #FA5C00;
  /* background: linear-gradient(90deg, #FF7D2C 0%, #FF6105 100%); */
  background: #FFF3E0;
  border: 1rpx solid #FA5C00;
}

/* 促销商品列表 */
.product-list {
  background: #FFFFFF;
  margin-bottom: 20rpx;
}

.product-item {
  display: flex;
  padding-bottom: 42rpx;
  border-bottom: 2rpx solid #F5F5F5;
  align-items: center;
}
.product-item:last-child {
  padding-bottom: 0;
}

.product-left {
  position: relative;
  width: 120rpx;
  height: 120rpx;
  margin-right: 24rpx;
}

.product-image {
  width: 120rpx;
  height: 120rpx;
}

.hot-tag {
  position: absolute;
  bottom: 0;
  left: 0;
  font-size: 20rpx;
  color: #FFFFFF;
  background: #13B09F;
  /* padding: 4rpx 8rpx; */
  /* border-radius: 0 8rpx 0 0; */
  width: 104rpx;
  height: 34rpx;
  background: #13B09F;
  border-radius: 16rpx 0rpx 16rpx 0rpx;
  text-align: center;
  line-height: 34rpx;
}

.product-center {
  flex: 1;
  /* min-width: 0; */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 160rpx;
}

.product-title {
  font-size: 28rpx;
  color: #333333;
  margin-bottom: 8rpx;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.product-desc {
  font-size: 24rpx;
  color: #999999;
  margin-bottom: 12rpx;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
}

.price-row {
  /* display: flex;
  align-items: baseline; */
}

.current-price {
  font-size: 32rpx;
  font-weight: 600;
  /* color: #13B09F; */
  color: #FF5B02;
  margin-right: 12rpx;
}

.original-price {
  font-size: 24rpx;
  color: #999999;
  text-decoration: line-through;
}

.product-right {
  display: flex;
  flex-direction: column;
  align-items: center;
  /* justify-content: space-between; */
  height: 120rpx;
  padding-top: 40rpx
}

.sold-count {
  font-size: 22rpx;
  color: #999999;
}

.buy-btn {
  border-radius: 24rpx;
  width: 140rpx;
  height: 56rpx;
  /* background: linear-gradient( 135deg, #FF7800 0%, #FF5700 100%); */
  background: #13B09F;
  border-radius: 28rpx 28rpx 28rpx 28rpx;
  text-align: center;
  /* line-height: 56rpx; */
  margin-bottom: 4rpx;
}

.buy-text {
  font-size: 26rpx;
  color: #FFFFFF;
  font-weight: 500;
}

/* 查看更多按钮 */
.view-more {
  background: #FFFFFF;
  padding: 28rpx 30rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #666666;
  font-size: 26rpx;
}

.down-icon {
  width: 24rpx;
  height: 24rpx;
  margin-left: 12rpx;
}

/* 底部操作栏 */
.bottom-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  height: 120rpx;
  background: #FFFFFF;
  box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
  padding: 0 24rpx;
  padding-top: 24rpx;
  gap: 34rpx;
}

.navigate-btn {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 332rpx;
  height: 100rpx;
  border-radius: 50rpx 50rpx 50rpx 50rpx;
  border: 2rpx solid #13B09F;
  font-family: PingFang SC, PingFang SC;
  font-weight: 500;
  font-size: 32rpx;
  color: #13B09F;
}

.call-btn {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #13B09F;
  color: #FFFFFF;
  font-size: 32rpx;
  font-weight: 500;

  width: 336rpx;
  height: 100rpx;
  /* background: linear-gradient( 95deg, #FF8000 0%, #FF5B00 100%); */
  background: #13B09F;
  border-radius: 50rpx 50rpx 50rpx 50rpx;
}
</style>